
<template>
  <div class="outer-padding">
    <div class="ds-title pd-bottom--32">数据概览</div>
    <div class="outer-title pd-bottom--32 pd-top--32">个人数据分析
      <p class="day-list">
        <span class="item-text item-text__margin pointer" :class="{ 'item-text--active': item.active }"
          v-for="item in nav" :key="item.id" @click="tabChange(item)">{{ item.name }}</span>
      </p>
    </div>
    <div class="block-page">
      <div class="block-page__item" v-for="item in 4" :key="item">
        <p>18907.6</p>
        <p class="item-text">总听课时长(小时)</p>
      </div>
    </div>
    <p class="outer-title pd-bottom--32 pd-top--32">个人听评课分析</p>
    <div class="draw-center none-border">
      <p class="draw-title--tab">数据范围：</p>
      <div class="draw-list__outer">
        <p class="draw-list__item" :class="{ 'draw-list__item--active': item.active }" v-for="item in list"
          :key="item.id" @click="choose(item)">{{ item.name }}</p>
      </div>
    </div>
    <div class="draw-center none-border">
      <p class="draw-title--tab">数据时间：</p>
      <a-button class="mg-right--12" @click="chooseDay(7)">近7天</a-button>
      <a-button class="mg-right--12" @click="chooseDay(30)">近30天</a-button>
      <a-range-picker v-model:value="valueDate" @change="chooseTime" />
    </div>
    <line-chart width="100%" height="450px" :chartDetailData="allCompaniesDetail"></line-chart>
    <p class="outer-title pd-bottom--32 pd-top--32">近期评分情况</p>
    <div class="draw-center none-border">
      <p class="draw-title--tab">数据时间：</p>
      <a-button class="mg-right--12" @click="chooseScoreDay(7)">近7天</a-button>
      <a-button class="mg-right--12" @click="chooseScoreDay(30)">近30天</a-button>
      <a-range-picker v-model:value="valueScoreDate" @change="chooseScoreTime" />
    </div>
    <a-tabs v-model:activeKey="activeKey" @change="navTab">
      <a-tab-pane :key="index" :tab="item" v-for="(item, index) in classType"></a-tab-pane>
    </a-tabs>
    <dynamic-table ref="tableRef" :columns="columns" :get-list-func="loadData" rowKey="id">
      <template #action="{ record }">
        <!-- @click="$router.push(`/user/sub?userId=${record.userId}`)" -->
        <div class="flex-table">
          <p class="mr-8" style="width:30px">{{ record.score }}</p>
          <div class="score-scale" style="width:100px">
            <div class="score-scale--progress" :style="{ 'width': (record.score / 100) * 80 + 'px' }"></div>
          </div>
        </div>
      </template>
    </dynamic-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
import { useRoute } from 'vue-router'
import { useStore } from '@/store'
import lineChart from './components/line.vue'
import { getCourseAssessTime } from '@/api/data/index'
import { getIndexList } from '@/api/listen'
import { columns } from './columns'

export default defineComponent({
  name: 'Markcomponent',
  components: {
    lineChart,
    DynamicTable
  },
  setup() {
    const tableRef = ref<InstanceType<typeof DynamicTable>>()

    const valueDate = ref<moment.Moment[]>([]);

    const valueScoreDate = ref<moment.Moment[]>([]);

    const route = useRoute()

    const store = useStore()

    const state = reactive({
      queryparam: {
        day: null,
        scoreDay: null
      },
      activeKey: 0,
      classType: ['听课', '评课', '巡课'],
      allCompaniesDetail: [] as any,
      nav: [
        { id: 0, name: '近7天', active: true },
        { id: 1, name: '近30天', active: false },
        { id: 2, name: '近180天', active: false },
      ],
      nav1: [
        { id: 0, name: '近7天', active: true },
        { id: 1, name: '近30天', active: false },
        { id: 2, name: '近180天', active: false },
      ],
      list: [
        { id: 0, name: '全部', type: 0, active: true },
        { id: 1, name: '听课', type: 0, active: false },
        { id: 2, name: '评课', type: 0, active: false },
      ]
    })

    /**
     * @description 加载表格数据
     */
    const loadData = (params) => {
      const myParams = { ...params, ...state.queryparam }
      return getIndexList(myParams)
    }


    // 获取折线图数据表
    const getLineData = async () => {
      const res = await getCourseAssessTime({})
      state.allCompaniesDetail = res.list
    }
    onMounted(async () => {
      getLineData()
    })
    const navTab = (ev) => {
      state.activeKey = ev
    }

    // 选择天
    const chooseDay = (item) => {
      state.queryparam.day = item;
    }
    // 联动日期
    const chooseTime = (ev) => {
      valueDate.value = ev
    }

    // 近期评分选择天
    const chooseScoreDay = (item) => {
      state.queryparam.scoreDay = item;
    }
    // 近期评分联动日期
    const chooseScoreTime = (ev) => {
      valueScoreDate.value = ev
    }

    // 选择课程状态
    const choose = (item) => {
      state.list.map(v => {
        v.id === item.id ? v.active = true : v.active = false;
      })
    }

    const tabChange = (ev) => {
      state.nav.map(v => v.id === ev.id ? v.active = true : v.active = false)
    }


    return {
      ...toRefs(state),
      tableRef,
      tabChange,
      valueDate,
      chooseDay,
      chooseTime,
      choose,
      chooseScoreDay,
      chooseScoreTime,
      valueScoreDate,
      navTab,
      loadData,
      columns
    }
  }
})
</script>
<style lang="scss" scoped>
.flex-table {
  display: flex;
  align-items: center;
}
</style>
